<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>洗手间</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content class="no-header">
    <div class="wash-room">
        <div class="wash-cover">
            <div class="wash-bg">
                <img src="assets/imgs/home/wash/bg.png" alt="">
            </div>
            <div class="wash-text">
                <span *ngFor="let data of washTotal;let i = index;">
                    <i [ngClass] = "{'active': data.value}">{{ data.value }}</i>
                    <p>{{ data.name }}</p>
                </span>
            </div>
        </div>

        <div class="wash-content">
            <div class="each-wash-list" *ngFor="let data of washRoom;let x = index;">
                <div class="each-wash" *ngFor="let item of (data | listLength: 0:4);let y = index;" [ngClass]="{ 'active': xItem === x && yItem === y && item.Active}" (click)="item? choose(x, y,item,data): ''">
                    <img src="assets/imgs/home/wash/clock.gif" *ngIf="item && item.isOverTime">
                    <p *ngIf="item">{{ item.areaName }}</p>
                    <p *ngIf="item" [ngStyle]="{ 'color': !item.alarms.length ? '#29CC80': '#FF9019' }">{{ !item.alarms.length? '已清扫': '需清扫' }}</p>
                </div>
                <div class="each-item" [ngClass]="{ 'isShown': data.itemShown}">
                    <div class="item-header">
                        <div>
                            <img src="assets/imgs/home/wash/people.svg" alt="">
                            <span>今日人流量：<i>{{ data.totalNum || 0 }}</i><em>人次</em></span>
                        </div>
                        <div>
                            <img src="assets/imgs/home/wash/clean.svg" alt="">
                            <span>清洁次数：<i>{{ data.cleanNum }}</i><em>次</em></span>
                        </div>
                    </div>
                    <div class="item-content" *ngIf="options">
                        <div style="min-height: 200px" echarts [options]="options"></div>
                    </div>
                    <div class="item-feedback">
                        <div class="feedback-total">
                            <img src="assets/imgs/home/wash/feed.png" alt=""><span>问题反馈统计 <i>{{ data.feedBackCount }}</i>次</span>
                        </div>
                        <div class="all-feedback">
                            <div class="each-feedback" *ngFor="let feed of data.feedBack;">
                                <label>{{ feed.quesItemName }}</label>
                                <div class="progress">
                                    <div class="progress-value" [ngStyle]="{ 'width' : feed.percent }"></div>
                                </div>
                                <!-- <ion-progress-bar class="progress" value="{{ feed.percent }}"></ion-progress-bar> -->
                                <i>{{ feed.quesDataCount }}</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-content>